<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <style type="text/css">
        span{
            color: #FF0000;
            font-size: 12px;
        }
    </style>
</head>
<body background="/myWeb/EVO3.jpg">
<script type="text/javascript">
    function format(username){
        if(!username){
            return "用户名不能为空";
        }else if(username.length < 6 | username.length > 15){
            return "用户名必须6-14位";
        }else if(!/^[A-Za-z0-9]+$/.test(username)){
            document.getElementById("username").onfocus = function(){
                document.getElementById("username").value = "";
            }
            return "用户名只能有数字和字母组成，不能含其他符号";
        }
        return "";
    }

    function sexException(){

        var sex = document.getElementsByName("sex");

        for(var i=0;i<sex.length;i++){
            if(sex[i].checked==true){
                return "";
            }
        }
        return "请选择您的性别";
    }

    function emailVerification(email){
        if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email)){
            return "邮箱格式不正确";
        }
        return "";
    }

    function passwordVerification(password,confirmPassword){
        if(confirmPassword != password){
            return "密码不一致";
        }
        return "";
    }

    function register(sexDiv){
        if(format(username.value) === ""
            && emailVerification(email.value) === ""
            && passwordVerification(password.value,confirmPassword.value) === ""
            && sexException() === ""){
            document.getElementById("userForm").submit();
            return;
        }
        username.focus();
        username.blur();

        email.focus();
        email.blur();

        confirmPassword.focus();
        confirmPassword.blur();


        sexDiv.innerText = sexException();
    }




    window.onload=function (){
        var usernameDiv = document.getElementById("usernameDiv");
        var emailDiv = document.getElementById("emailDiv");
        var confirmPasswordDiv = document.getElementById("confirmPasswordDiv");
        var sexDiv = document.getElementById("sexDiv");

        var username = document.getElementById("username");
        var email = document.getElementById("email");
        var password = document.getElementById("password");
        var confirmPassword = document.getElementById("confirmPassword");
        var btn = document.getElementById("btn");


        username.onblur = function(){
            var userName = username.value.trim();
            var nameStr = format(userName);
            usernameDiv.innerText = nameStr;
            if(nameStr != ""){
                username.onfocus = function(){
                    usernameDiv.innerText = "";
                    if(nameStr.length === 21){
                        username.value = "";
                    }
                }
            }
        };
        email.onblur = function(){
            emailDiv.innerText = emailVerification(email.value);
            if(emailVerification(email.value) != ""){
                email.onfocus = function(){
                    emailDiv.innerText = "";
                }
            }
        };
        confirmPassword.onblur = function(){
            confirmPasswordDiv.innerText = passwordVerification(password.value,confirmPassword.value);
            if(passwordVerification(password.value,confirmPassword.value) != ""){
                confirmPassword.onfocus = function(){
                    confirmPasswordDiv.innerText = "";
                }
            }
        };

        var sex = document.getElementsByName("sex");
        for(var i=0;i<sex.length;i++){
            sex[i].onfocus = function(){
                sexDiv.innerText = "";
            }
        }




        confirmPassword.onkeydown = function(event){
            if(event.keyCode === 13){
                register(sexDiv);
            }
        };
        btn.onclick = function(){
            register(sexDiv);
        }

    }
</script>

<form action="/myWeb/user/add" method="get" id="userForm">

    <center>
        <table>
            <tr>
                <td>邮箱</td>
                <td><input type="text" name="email" id="email" /></td>
                <td><span id="emailDiv"></span></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username" /></td>
                <td><span id="usernameDiv"></span></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="男" />男
                    <input type="radio" name="sex" value="女" />女
                </td>
                <td><span id="sexDiv"></span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password" /></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" id="confirmPassword" /></td>
                <td><span id="confirmPasswordDiv"></span></td>
            </tr>
            <tr>
                <td><input type="button" value="注册" id="btn" /></td>
            </tr>
        </table>
    </center>

</form>
</body>
</html>
